<template>
  <el-row>
     <el-col :xs="22" :sm="23" :md="23" :lg="23" :xl="23">
      <el-tabs v-model="selectTabName" type="card" closable @tab-remove="handleTabRemove" @tab-click="handleTabClick">
          <el-tab-pane
            class="el-tabs-pane"
            v-for="(item, index) in menuTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name">
          </el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" style="line-height: 40px;border-bottom: 1px solid #E4E7ED;">
     <el-dropdown size="mini" placement="bottom" @command="handleCommand">
       <span class="el-dropdown-link">
        <i class="el-icon-arrow-down"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item :command="closeCurrent" divided icon="el-icon-arrow-right">关闭当前</el-dropdown-item>
         <el-dropdown-item  :command="closeOther" divided icon="el-icon-right">关闭其他</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
  import { getOpenTabs,addOpenTabs,minusOpenTabs,batchMinusOpenTabs,getSelectTab,changeSelectTab } from '@/utils/menuTab.js'
  export default {
     name:'MenuTab',
     props:['tabChangeActiveIndex'],
     data(){
        return {
           selectTabName:'',
           menuTabs:[]
        }
     },
     methods:{
        handleTabRemove(name){
          //如果只剩一个不移除且移除后始终定位到第一个tab
          if(this.menuTabs.length==1){
             return;
          }
          for(let i in this.menuTabs){
             if(this.menuTabs[i]['name']==name){
                this.menuTabs.splice(i,1);
             }
          }
          this.selectTabName=this.menuTabs[0]['name'];
          this.$router.push(this.selectTabName);
          changeSelectTab(this.selectTabName);
          minusOpenTabs(name);
        },
        handleTabClick(tab)
        {
           this.tabChangeActiveIndex(tab.name);
           this.$router.push(tab.name);
        },
        //批量操作
        closeCurrent(){
           if(this.menuTabs.length==1){
              return;
           }
           for(let i in this.menuTabs){
              if(this.menuTabs[i]['name']==this.selectTabName){
                 this.menuTabs.splice(i,1);
              }
           }
           this.selectTabName=this.menuTabs[0]['name'];
           this.$router.push(this.selectTabName);
           changeSelectTab(this.selectTabName);
           minusOpenTabs(name);
        },
        closeOther(){
           if(this.menuTabs.length==1){
              return;
           }
           let removeTabNames=[];
           let newTabs=[];
           for(let i in this.menuTabs){
              if(this.menuTabs[i]['name']!=this.selectTabName){
                 removeTabNames.push(this.menuTabs[i]['name']);
              }else{
                 newTabs.push({
                    title:this.menuTabs[i]['title'],
                    name:this.selectTabName
                 });
              }
           }
           this.menuTabs=newTabs;
           this.$router.push(this.selectTabName);
           batchMinusOpenTabs(removeTabNames);
        },
        handleCommand(e){
           e();
        }
     },
     created() {
        this.menuTabs=getOpenTabs();
        let current_select_tab=getSelectTab();
        this.$router.push(current_select_tab);  //①路由跳转
        this.selectTabName=current_select_tab;  //②菜单标签栏选中
        this.tabChangeActiveIndex(current_select_tab);  //③navMenu菜单栏选中
     },
     //获取当前的路由meta元信息 meta{ title,show_tab}  show_tab表示是否展示在菜单标签栏
     watch:{
         $route(to,from){
            let matched = this.$route.matched.filter(item => item.name)
            let current_meta=matched[matched.length-1];
            let flag=false;
            //①如果在已经打开的标签里就切换
            for(let i in this.menuTabs){
               if(to.path==this.menuTabs[i]['name']){
                   flag=true;
                   this.selectTabName=to.path;
                   changeSelectTab(to.path);
                   break;
               }
            }
            //②没有在就新增
            if(!flag){
               if(current_meta['meta']['show_tab']==1){
                   let tab_obj={
                         title:current_meta['meta']['title'],
                         name:to.path
                   };
                   this.menuTabs.push(tab_obj);
                   this.selectTabName=to.path;
                   changeSelectTab(to.path);
                   addOpenTabs(tab_obj);
               }
            }
        }
     }
  }
</script>

<style>
</style>
